<template>
  <div class="container">
    <div class="content def">
      <div class="categories">
        <div><span>类型</span>
          <span v-for="(item,i) in categories.type" :key="i"
           :class="{'active':item.goods_type === markSelected.type}" 
           @click="change(item.goods_type)">
           {{item.goods_type}}
          </span>
        </div>
        <div><span>价格</span>
          <span v-for="(item,i) in categories.price" :key="i"
           :class="{'active':item === markSelected.price}" @click="change(item)">
           {{item}}
          </span>
        </div>
        <div><span>时间</span>
          <span v-for="(item,i) in categories.time" :key="i"
           :class="{'active':item === markSelected.time}" @click="change(item)">
           {{item}}
          </span>
        </div>
      </div>
    </div>
    <NoData v-show="this.$store.state.goodsSort.length === 0" />
    <CommonMall/>
  </div>
</template>

<script>
import {reqCategoryType,reqCategory} from '../api'
import CommonMall from '../components/CommonMall'
import NoData from '../components/common/NoData'
import {mapState} from 'vuex'
export default {
    name:'Mall',
    data() {
      return {
        categories:{
          type:[],
          price:['由低到高','由高到低'],
          time:['最新上架'],
        }
      }
    },
    methods: {
      async change(item){
        if (this.categories.price.indexOf(item) > -1) {
          if (this.markSelected.price === item) {
            this.markSelected.price = ''
          }else{
            this.markSelected.price = item
          }
        }else if(this.categories.time.indexOf(item) > -1){
          if (this.markSelected.time === item) {
            this.markSelected.time = ''
          }else{
            this.markSelected.time = item
          }
        }else{
          if (this.markSelected.type === item) {
            this.markSelected.type = ''
          }else{
           this.markSelected.type = item
          }
        }
        this.$store.commit('markSelected',this.markSelected)
        this.$store.commit('goodsSort',reqCategory(this.markSelected,this.userInput))
      },
    },
    components:{CommonMall,NoData},
    async mounted() {
      this.categories.type = await reqCategoryType()
    },
    computed:{
      ...mapState(['markSelected','userInput'])
    }
}
</script>

<style scoped>
  .active{
    color:#c69c6c;
  }
  .def{
    margin-top: 30px;
    margin-bottom: 20px;
  }
  .categories{
    color: black;
    background: white;
    border-radius: 8px;
    padding: 10px 0 10px 20px;
    user-select: none;
  }
  .categories > div{
    margin: 10px 0 10px 10px;
  }
  span{
    margin-right: 20px;
  }
  .categories > div span:nth-of-type(n+2){
    cursor: pointer;
  }
  .categories > div span:first-child{
    color: black;
    opacity: 0.8;
  }
</style>